<template>
	<view class="matchmain animated fadeIn faster">
		<view class="position-fixed w-100 z-index-100 pb-1" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}">
			<view class="d-flex d-flex-middle d-flex-between" :style="{'height': $store.state.titleBarHeight + 'px'}">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30 colorfff"></text></view>
				<view class="colorfff">选择搭子</view>
				<text class="iconfont icon-31fanhui1 font30 colorfff vhiden"></text>
			</view>
		</view>
		<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.titleBarHeight + 'px'}"></view>
		<view class="d-flex d-flex-center d-flex-middle mb-4 mt-6">
			<text class="colorman mr-1 font30">5</text>
			<text class="colorfff font24">位搭子正在等你选择</text>
		</view>
		<view class="d-flex d-flex-center position-absolute z-index-100" style="left: 50%; transform: translateX(-50%);"
			  @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
			<view  class="position-relative">
			  	<image  :src="AllDaziList[AllDaziList.length-1].avatar"
			  			class="rounded mt-2"
			  			style="width: 100rpx; height: 100rpx; border: 1px solid #fff;"
						:style="{opacity: IconOpacity}"
			  			@click="changeDazi(DaziList[0],1)"
			  	></image>
			</view>
			<view  class="position-relative">
				<image  :src="DaziList[0].avatar"
						class="rounded mt-3 mx-2"
						style="width: 130rpx; height: 130rpx; border: 1px solid #fff;"
						:style="[{transform: 'translate('+LeftAvaDistance+'px, '+moveDistanceY+'px)'}, {width: LeftIconSize+'rpx'}, {height: LeftIconSize+'rpx'}]"
						@click="changeDazi(DaziList[0],1)"
				></image>
			</view>
			<view  class="position-relative currentBox animated"
				   :style="[{transform: 'translate('+CenterMoveDisX+'px, '+ CenterMoveDisY+'px)'}, {width: BoxWH+'rpx'}, {height: BoxWH+'rpx'}]">
				<image  :src="DaziList[1].avatar" 
						class="rounded mt-3 currentDazi"
						:style="[{width: IconWHL+'rpx'}, {height: IconWHL+'rpx'}]"
						@click="changeDazi(DaziList[1],0)"
				></image>
			</view>
			<view  class="position-relative">
				<image  :src="DaziList[2].avatar"
						class="rounded mt-3 mx-2"
						style="border: 1px solid #fff;"
						:style="[{transform: 'translate('+RightAvaDistance+'px, '+ RightAvaDistanceY+'px)'}, {width: RightIconSize+'rpx'}, {height: RightIconSize+'rpx'}]"
						@click="changeDazi(DaziList[2],2)"
				></image>
			</view>
			<view  class="position-relative">
			  	<image  :src="AllDaziList[3].avatar"
			  			class="rounded mt-2 position-relative z-index-10"
			  			style="width: 100rpx; height: 100rpx; border: 1px solid #fff;"
						:style="{opacity: IconOpacity}"
			  			@click="changeDazi(DaziList[0],1)"
			  	></image>
			</view>
		</view>
		<swiper class="swiper" :indicator-dots="indicatorDots" :interval="interval" :current="CurrentCard" @animationfinish="onAnimationfinish" @change="onChange" @transition="OnTransition" :duration="450" style="height: 1100rpx;">
			<swiper-item v-for="item in AllDaziList" :key="item.id">
				<view class="bg-fff rounded50 pb-5" style="width: 620rpx; height: 800rpx; margin: 230rpx 66rpx;" :class="dex === CurrentCard? 'currentCart' : ''">
					<text class="iconfont icon-gengduo1 font32 morecolor d-flex d-flex-end mr-4 mt-2"></text>
					<view class="voice colorfff text-center">{{CurrentCard}}</view>
					<view class="font30 text-center" style="color: #3E3A39;">{{item.remark}}</view>
					<view class="d-flex-column d-flex-middle d-flex-center mt-7">
						<view class="d-flex">
							<view class="font32 font-bold mr-2">{{item.playerNickName}}</view>
							<view class="">
								<image v-if="item.gender === 1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png" style="width: 30rpx; height: 30rpx;"></image>
								<image v-else src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png" style="width: 30rpx; height: 30rpx;"></image>
							</view>
						</view>
						<view class="font26 mt-2" style="color: #9D9D9E;">30分钟</view>
						<view class="d-flex">
							<view class="d-flex mt-2 mr-2">
								<view class="d-flex-btn" style="background: #F6B42C; padding: 4rpx 12rpx 4rpx 20rpx; border-radius: 10rpx 0 0 10rpx;">
									<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202585.png" style="width: 40rpx; height: 32rpx;"></image>
								</view>
								<view class="" style="background: #fceacc; color: #FF9645; padding: 6rpx 16rpx 6rpx 10rpx; border-radius: 0 10rpx 10rpx 0;">王者以下</view>
							</view>
							<view class="d-flex mt-2">
								<view class="d-flex-btn" style="background: #B73DE3; padding: 4rpx 10rpx 4rpx 10rpx; border-radius: 10rpx 0 0 10rpx;">
									<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203178.png" style="width: 40rpx; height: 32rpx;"></image>
								</view>
								<view class="" style="background: #eed2f9; color: #B73DE3; padding: 6rpx 16rpx 4rpx 6rpx; border-radius: 0 10rpx 10rpx 0;">最强王者</view>
							</view>
						</view>
						<view class="d-flex-column d-flex-middle mt-5">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202768.png" style="width: 130rpx; height: 130rpx;"></image>
							<text class="font24">ENTG</text>
						</view>
						<view class="colorfff linerbg pt-2 pb-3 rounded50 font34 text-center mt-5" style="width: 70%;">就选他了</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import { manner } from "@/util/manner.js";
	import { DaziApi } from "../../http/Dazi";
	export default {
		data() {
			return {
				bgcolor:'transparent',
				currentDazi: 0,
				CurrentCard: 0,
				currentCardPosition: 0,
				gameId: 14,
				IconOpacity: 1,
				DaziList: [],
				AllDaziList: [],
				currentDaziList: [],
				startX: 0,
				BoxWH: 267,	// 中间头像背景大小
				IconWHL: 250, // 中间头像大小
				RightIconSize: 130,
				LeftIconSize: 130,
				moveDistanceX: 0,
				moveDistanceY: 0,
				CenterMoveDisX: 0,
				CenterMoveDisY: 0,
				LeftAvaDistance: 0,
				RightAvaDistance: 0,
				RightAvaDistanceY: 0,
				currentX: 0
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#191635'
			}else{
				this.bgcolor = 'transparent'
			}
		},
		onLoad(opt) {
			// this.gameId = opt.gameId
			// let Params = JSON.parse(opt.params)
			// Params.forEach(i => {
			// 	// console.log(i);
			// })
			this.Match()
		},
		methods: {
			goBack(){
				manner.goBack()
			},
			changeDazi(item, dex) {
				if(dex === 0) {
					return
				}
				if(dex === 2) { // 左滑
					this.leftSlide()
					this.CurrentCard++
				}
				if(dex === 1) { // 右滑
					this.rightSlide()
					this.CurrentCard--
				}
			},
			onChange(e) {
				console.log('onChange:',e);
			},
			onAnimationfinish(e) {
				console.log('onAnimationfinish:',e);
			},
			leftSlide() {
				let transform = this.AllDaziList[0]
				this.AllDaziList.shift(1)
				this.AllDaziList.push(transform)
				setTimeout(() => {
					this.DaziList = []
					this.AllDaziList.forEach(i => {
						if(this.DaziList.length < 3) {
							this.DaziList.push(i)
						}
					})
					this.currentDaziList = this.DaziList[1]
				},200)
			},
			rightSlide() {
				let transform = this.AllDaziList[this.AllDaziList.length - 1];
				this.AllDaziList.pop()
				this.AllDaziList.unshift(transform)
				setTimeout(() => {
					this.DaziList = []
					this.AllDaziList.forEach(i => {
						if(this.DaziList.length < 3) {
							this.DaziList.push(i)
						}
					})
					this.currentDaziList = this.DaziList[1]
				},200)
			},
			async Match() {
				const param = {
					gameId: this.gameId
				}
				let res = await DaziApi.Match(param);
				this.AllDaziList = res
				this.AllDaziList.forEach(i => {
					if(this.DaziList.length < 3) {
						this.DaziList.push(i)
					}
				})
				this.currentDaziList = this.DaziList[0]
				console.log(this.DaziList);
			}
		}
	}
</script>

<style scoped>
.matchmain{
	background-image: url('https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/machbg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 100%;
	min-height: 100vh;
}
.metting-box {
	width: 98%;
	height: 940rpx;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50rpx 50rpx 0 0;
	background-color: #fff;
	overflow: hidden;
}
.linerbg-b {
	background: linear-gradient( 180deg, #61D1E5 0%, rgba(106,211,230,0.94) 10%, rgba(131,219,234,0.78) 29%, rgba(172,230,241,0.52) 54%, rgba(227,247,250,0.17) 86%, rgba(255,255,255,0) 100%);
}
.colorman{
	color:#5db0fe
}
.currentBox {
	background: #f00;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(to top, #fab452, #9d41d3);
	transition: all 0.3s ease;
}
.currentDazi {
	border: 1px solid #fff;
	margin-top: 0;
	border: 0;
	border-radius: 100%;
	transition: all 0.3s ease;
}
.voice {
	width: 200rpx;
	height: 76rpx;
	line-height: 70rpx;
	margin: 45rpx auto 0;
	background: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203416.png);
	background-size: contain;
}
.currentCart {
/* 	width: 640rpx !important;
	height: 850rpx; */
}
</style>
